import { ref, Ref, watchEffect } from "vue"
import { SecondCtgy, ThirdCtgy } from "@/store/state"
import router from '@/router'
import { storeToRefs } from 'pinia'
import ctgyStore from '@/piniastore/ctgy'
import bookStore from '@/piniastore/book'
import bookService from '@/piniaviews/books/service'
import { statSync } from "fs"
// 1级分类到3级分类的所有业务处理
export default class FirstToThirdCtgy {
  static store = ctgyStore()
  static storeRefs = storeToRefs(FirstToThirdCtgy.store) // 响应式 state 
  static firstCtgyActiveIndex: Ref<number> = ref(0) // 1级分类激活的tab索引


  // 获取所有1级分类
  static getFirstCtgys = async () => {
    // 使用 actions 获取数据库数据并保存到 state 中
    await FirstToThirdCtgy.store.findFirstCtgyList()
    this.storeFirstCtgy(1) // 保存当前选中的1级分类，用于后续面包屑
  }

  // 保存当前选中的1级分类，用于后续面包屑
  static storeFirstCtgy = (index: number) => {
    // 获取当前的1级分类(面包屑使用)
    const firstCtgy = this.store.firstCtgyList.find(firstCtgy => {
      return firstCtgy.firstctgyId === index
    })!
    this.store.storeFirstCtgy(firstCtgy) // 将当前选中的1级分类保存到state中，后续面包屑使用
  }

  // 1级分类tab中的点击事件
  static changeTab = (index: number) => {
    FirstToThirdCtgy.firstCtgyActiveIndex.value = index
    FirstToThirdCtgy.storeFirstCtgy(index + 1)
  }

  // 获取2级分类和对应的3级分类
  static getSecThrdCtgyList() {
    // 默认会自动执行一次并自动追踪响应式数据发生变化时,回调函数自动执行
    watchEffect(async () => {
      // 使用 actions 中的方法根据索引获取数据库数据并保存到 state 中
      await FirstToThirdCtgy.store.findSecThirdCtgyList(FirstToThirdCtgy.firstCtgyActiveIndex.value + 1)
    })
  }

  // 3级分类展开与收缩
  static openOrCollapse(event: Event, secondctgy: SecondCtgy) {
    const currentTarget = <HTMLBodyElement>event.currentTarget
    const ulPanel = currentTarget.parentElement! // 获取ul
    if (secondctgy.isReadyOpen) { // 当前最多显示5条3级分类 (可以点击展开按钮)
      if (secondctgy.thirdctgys.length % 3 === 0) {
        ulPanel.style.paddingBottom = 0.5 + 'rem'
      }
      secondctgy.isReadyOpen = false // 修改为false可以显示所有3级分类
    } else { // 当前显示所有3级分类 (可以点击收起按钮)
      if (secondctgy.thirdctgys.length % 3 === 0) {
        ulPanel.style.paddingBottom = '0'
      }
      secondctgy.isReadyOpen = true // 修改为true最多可以显示5条3级分类
    }
  }

  // 跳转路由保存分类信息
  static toBookInfo = (thirdCtgy: ThirdCtgy, secondctgy: SecondCtgy) => {
    this.store.storeSecondCtgy(secondctgy) // 保存选中的2级分类对象到 pinia 的 state 中
    this.store.storeThirdCtgy(thirdCtgy) // 保存选中的3级分类对象到 pinia 的 state 中
    this.store.storeIsReadyOpen(secondctgy.isReadyOpen) // 保存当前是否展开该3级分类列表到 pinia 的 state 中
    this.store.storeThirdCtgyList(secondctgy.thirdctgys) // 保存同类别的所有3级分类列表到 pinia 的 state 中
    this.store.storeSubThirdCtgyList(secondctgy.subThirdCtgys) // 保存同类别的部分3级分类列表到 pinia 的 state 中
    this.store.switchThirdCtgyIndex = thirdCtgy.thirdctgyid // 保存跳转路由时选中的3级分类id到 pinia 的 state 中
    router.push({ name: 'books' })
  }

  // 改变 books 页面3级分类选中的id值
  static changeThirdCtgyIndex = async (thirdCtgyActiveIndex: number) => {
    this.store.switchThirdCtgyIndex = thirdCtgyActiveIndex
    const {sortField, ascOrDesc, uptBookNumWithSCLstNum} = bookService
    await bookStore().findBooksByThirdCtgyId(thirdCtgyActiveIndex, sortField.value, ascOrDesc.value)
    // 将购买数量更新
    uptBookNumWithSCLstNum()
  }

  // 返回上一个页面
  static back = () => {
    router.back()
  }

  //跳转到 books 页面后控制3级分类列表是否展开和收起 
  static openOrCollapseInBook = (isReadyOpen: boolean) => {
    this.store.isReadyOpen = isReadyOpen
  }
}
